<template>
	<view class="content">
		<!-- 搜索框 -->
		<search></search>
		<!-- 轮播图 -->
		<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :circular="true">
			<block v-for="(item,index) in swiperList" :key="index">
				<swiper-item class="swiper-item">
					<image class="img" :src="item.image_src" mode=""></image>
				</swiper-item>
			</block>
		</swiper>
		<!-- 分类列表 -->
		<view class="sort">
			<view class="sort-item" v-for="(item,index) in navList" :key="index">
				<image class="img" :src="item.image_src" mode=""></image>
			</view>
		</view>
		<!-- 时尚女装标题 -->
		<view class="detail-box" v-for="(item,index) in floorList" :key="index">
			<view class="floor-title">
				<image mode="aspectFit" class="img" :src="item.floor_title.image_src"></image>
			</view>
			<!-- 展示下面的商品图文 -->
			<view class="product_list">
				<view class="left">
					<image :src="item.product_list[0].image_src" mode=""></image>
				</view>
				<view class="middle">
					<view class="middle-top">
						<image :src="item.product_list[1].image_src" mode=""></image>
					</view>
					<view class="middle-bottom">
						<image :src="item.product_list[2].image_src" mode=""></image>
					</view>
				</view>
				<view class="right">
					<view class="right-top">
						<image :src="item.product_list[3].image_src" mode=""></image>
					</view>
					<view class="right-bottom">
						<image :src="item.product_list[4].image_src" mode=""></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import search from '../../components/search.vue'
	export default {
		components:{
			search
		},
		data() {
			return {
				swiperList:[],
				navList:[],
				floorList:[]
			}
		},
		onLoad() {
			this.getIndexData()
		},
		methods: {
			async getIndexData(){
				const resLunBo = await this.$http({url:'/home/swiperdata',method:'get'})
				this.swiperList = resLunBo
				const resNav = await this.$http({url:'/home/catitems',method:'get'})
				this.navList = resNav
				const resFloor = await this.$http({url:'/home/floordata',method:'get'})
				this.floorList = resFloor
			}
		}
	}
</script>

<style lang="less">
.content{
	width: 100%;
	padding-bottom: 80rpx;
	padding-top: 100rpx;
	.swiper{
		width: 100%;
		height: 340rpx;
		.swiper-item{
			width: 100%;
			height: 100%;
			.img{
				width: 100%;
				height: 100%;
			}
		}
	}
	.sort{
		width: 100%;
		height: 194rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		.sort-item{
			width: 128rpx;
			height: 140rpx;
		}
		.img{
			width: 100%;
			height: 100%;
		}
	}
	.detail-box{
		width: 100%;
		margin-top: 30rpx;
		.floor-title{
			width: 100%;
			height: 88rpx;
			margin-bottom: 20rpx;
			.img{
				width: 100%;
				height: 100%;
			}
		}
		.product_list{
			display: flex;
			justify-content: center;
			align-items: center;
			.left{
				width: 232rpx;
				height: 370rpx;
				margin-right: 10rpx;
			}
		}
	}
} 

.content .detail-box .product_list .middle,
.content .detail-box .product_list .right{
	width: 232rpx;
	height: 370rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin-right: 10rpx;
}
.content .detail-box .product_list .middle .middle-top,
.content .detail-box .product_list .right .right-top,
.content .detail-box .product_list .middle .middle-bottom,
.content .detail-box .product_list .right .right-bottom{
	height: 180rpx;
	width: 100%;
}
.content .detail-box .product_list image{
	width: 100%;
	height: 100%;
}
</style>
